<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bs-stepper/dist/css/bs-stepper.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>

<body class="bg-body-tertiary py-3">
<div class="container-fluid">
    <div class="row g-3">
        <div class="col-md-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-body">线性步进器</div>
                <div class="card-body overflow-auto">
                    <div class="bs-stepper" id="bs-stepper1">
                        <div class="bs-stepper-header" role="tablist">
                            <div class="step" data-target="#part1">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle">1</span>
                                    <span class="bs-stepper-label">邮箱</span>
                                </button>
                            </div>
                            <div class="line"></div>
                            <div class="step" data-target="#part2">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle">2</span>
                                    <span class="bs-stepper-label">密码</span>
                                </button>
                            </div>
                            <div class="line"></div>
                            <div class="step" data-target="#part3">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle">3</span>
                                    <span class="bs-stepper-label">完成</span>
                                </button>
                            </div>
                        </div>
                        <div class="bs-stepper-content">
                            <form action="#" novalidate>
                                <div id="part1" class="content">
                                    <div class="mb-3">
                                        <label for="email" class="form-label">邮箱地址</label>
                                        <input type="email" class="form-control" name="email" id="email">
                                        <div id="emailHelp" class="form-text">
                                            我们不会在别处分享您的邮箱
                                        </div>
                                    </div>
                                    <button class="btn btn-primary" onclick="stepper1.next()">下一步</button>
                                </div>
                                <div id="part2" class="content">
                                    <div class="mb-3">
                                        <label for="password" class="form-label">密码</label>
                                        <input type="password" class="form-control" name="password" id="password"
                                               autocomplete>
                                    </div>
                                    <button class="btn btn-primary" onclick="stepper1.previous()">上一步</button>
                                    <button class="btn btn-primary" onclick="stepper1.next()">下一步</button>
                                </div>
                                <div id="part3" class="content">
                                    <button class="btn btn-primary mt-5" onclick="stepper1.previous()">上一步</button>
                                    <button type="submit" class="btn btn-primary mt-5">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-body">非线性步进器</div>
                <div class="card-body overflow-auto">
                    <div class="bs-stepper" id="bs-stepper2">
                        <div class="bs-stepper-header">
                            <div class="step" data-target="#bs-stepper2-1">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle"><i class="bi bi-pen"></i></span>
                                    <span class="bs-stepper-label">用户名</span>
                                </button>
                            </div>
                            <div class="bs-stepper-line"></div>
                            <div class="step" data-target="#bs-stepper2-2">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle"><i class="bi bi-geo-alt-fill"></i></span>
                                    <span class="bs-stepper-label">地址</span>
                                </button>
                            </div>
                            <div class="bs-stepper-line"></div>
                            <div class="step" data-target="#bs-stepper2-3">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle"><i class="bi bi-file-arrow-up"></i></span>
                                    <span class="bs-stepper-label">提交</span>
                                </button>
                            </div>
                        </div>
                        <div class="bs-stepper-content">
                            <form action="#">
                                <div id="bs-stepper2-1" class="bs-stepper-pane">
                                    <div class="mb-3">
                                        <label for="username" class="form-label">用户名</label>
                                        <input type="text" class="form-control" name="username" id="username">
                                    </div>
                                    <button class="btn btn-primary" onclick="stepper2.next()">下一步</button>
                                </div>
                                <div id="bs-stepper2-2" class="bs-stepper-pane">
                                    <div class="mb-3">
                                        <label for="address" class="form-label">家庭住址</label>
                                        <textarea class="form-control" id="address"
                                                  rows="3" name="address"></textarea>
                                    </div>
                                    <button class="btn btn-primary" onclick="stepper2.next()">下一步</button>
                                </div>
                                <div id="bs-stepper2-3" class="bs-stepper-pane text-center">
                                    <button type="submit" class="btn btn-primary mt-5">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-body">非线性步进器(带淡入淡出效果)</div>
                <div class="card-body overflow-auto">
                    <div class="bs-stepper" id="bs-stepper3">
                        <div class="bs-stepper-header">
                            <div class="step" data-target="#bs-stepper3-1">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle"><i class="bi bi-pen"></i></span>
                                    <span class="bs-stepper-label">用户名</span>
                                </button>
                            </div>
                            <div class="bs-stepper-line"></div>
                            <div class="step" data-target="#bs-stepper3-2">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle"><i class="bi bi-geo-alt-fill"></i></span>
                                    <span class="bs-stepper-label">地址</span>
                                </button>
                            </div>
                            <div class="bs-stepper-line"></div>
                            <div class="step" data-target="#bs-stepper3-3">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle"><i class="bi bi-file-arrow-up"></i></span>
                                    <span class="bs-stepper-label">提交</span>
                                </button>
                            </div>
                        </div>
                        <div class="bs-stepper-content">
                            <form action="#">
                                <div id="bs-stepper3-1" class="bs-stepper-pane">
                                    <div class="mb-3">
                                        <label for="username3" class="form-label">用户名</label>
                                        <input type="text" class="form-control" name="username3" id="username3">
                                    </div>
                                    <button class="btn btn-primary" onclick="stepper3.next()">下一步</button>
                                </div>
                                <div id="bs-stepper3-2" class="bs-stepper-pane">
                                    <div class="mb-3">
                                        <label for="address3" class="form-label">家庭住址</label>
                                        <textarea class="form-control" id="address3"
                                                  rows="3" name="address3"></textarea>
                                    </div>
                                    <button class="btn btn-primary" onclick="stepper3.next()">下一步</button>
                                </div>
                                <div id="bs-stepper3-3" class="bs-stepper-pane text-center">
                                    <button type="submit" class="btn btn-primary mt-5">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-body">垂直步进器</div>
                <div class="card-body overflow-auto">
                    <div class="bs-stepper vertical" id="bs-stepper4">
                        <div class="bs-stepper-header" role="tablist">
                            <div class="step" data-target="#bs-stepper4-1">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle">1</span>
                                    <span class="bs-stepper-label">邮箱</span>
                                </button>
                            </div>
                            <div class="bs-stepper-line"></div>
                            <div class="step" data-target="#bs-stepper4-2">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle">2</span>
                                    <span class="bs-stepper-label">密码</span>
                                </button>
                            </div>
                            <div class="bs-stepper-line"></div>
                            <div class="step" data-target="#bs-stepper4-3">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle">3</span>
                                    <span class="bs-stepper-label">完成</span>
                                </button>
                            </div>
                        </div>
                        <div class="bs-stepper-content flex-grow-1">
                            <form onSubmit="return false">
                                <div id="bs-stepper4-1" class="bs-stepper-pane fade">
                                    <div class="mb-3">
                                        <label for="email4" class="form-label">邮箱地址</label>
                                        <input type="email" class="form-control" name="email4" id="email4">
                                        <div id="emailHelp" class="form-text">
                                            我们不会在别处分享您的邮箱
                                        </div>
                                    </div>
                                    <button class="btn btn-primary" onclick="stepper4.next()">下一步</button>
                                </div>
                                <div id="bs-stepper4-2" class="bs-stepper-pane fade">
                                    <div class="mb-3">
                                        <label for="password4" class="form-label">密码</label>
                                        <input type="password" class="form-control" name="password4" id="password4"
                                               autocomplete>
                                    </div>
                                    <button class="btn btn-primary" onclick="stepper4.previous()">上一步</button>
                                    <button class="btn btn-primary" onclick="stepper4.next()">下一步</button>
                                </div>
                                <div id="bs-stepper4-3" class="bs-stepper-pane fade">
                                    <button class="btn btn-primary" onclick="stepper4.previous()">上一步</button>
                                    <button type="submit" class="btn btn-primary ">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-body">表单验证</div>
                <div class="card-body overflow-auto">
                    <div class="bs-stepper" id="bs-stepper5">
                        <div class="bs-stepper-header" role="tablist">
                            <div class="step" data-target="#bs-stepper5-1">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle">1</span>
                                    <span class="bs-stepper-label">邮箱</span>
                                </button>
                            </div>
                            <div class="bs-stepper-line"></div>
                            <div class="step" data-target="#bs-stepper5-2">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle">2</span>
                                    <span class="bs-stepper-label">密码</span>
                                </button>
                            </div>
                            <div class="bs-stepper-line"></div>
                            <div class="step" data-target="#bs-stepper5-3">
                                <button type="button" class="step-trigger">
                                    <span class="bs-stepper-circle">3</span>
                                    <span class="bs-stepper-label">完成</span>
                                </button>
                            </div>
                        </div>
                        <div class="bs-stepper-content">
                            <form action="#" class="needs-validation" novalidate>
                                <div id="bs-stepper5-1" class="bs-stepper-pane fade">


                                    <div class="mb-3">
                                        <label for="email5" class="form-label">邮箱地址</label>
                                        <input type="email" class="form-control" id="email5" name="email5" required>
                                        <div class="invalid-feedback">
                                            邮件必填
                                        </div>
                                    </div>

                                    <button class="btn btn-primary btn-next-form">下一步</button>
                                </div>
                                <div id="bs-stepper5-2" class="bs-stepper-pane fade">
                                    <div class="mb-3">
                                        <label for="password5" class="form-label">密码</label>
                                        <input type="password" class="form-control" id="password5" name="password5"
                                               autocomplete required>
                                        <div class="invalid-feedback">
                                            密码必填
                                        </div>
                                    </div>
                                    <button class="btn btn-primary btn-next-form">下一步</button>
                                </div>
                                <div id="bs-stepper5-3" class="bs-stepper-pane fade text-center">
                                    <button type="submit" class="btn btn-primary mt-5">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<!--回到顶部开始-->
<a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
<!--回到顶部结束-->

<script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/bs-stepper/dist/js/bs-stepper.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../dist/js/app.js"></script>
<!--假数据模拟,生产环境中请直接删除该js-->
<script src="../dist/js/bootstrap-admin.mock.js"></script>
<script>
    $(document).ready(function () {
        window.stepper1 = new Stepper($('#bs-stepper1')[0]);

        window.stepper2 = new Stepper($('#bs-stepper2')[0], {
            linear: false
        })

        window.stepper3 = new Stepper($('#bs-stepper3')[0], {
            linear: false,
            animation: true
        })

        window.stepper4 = new Stepper($('#bs-stepper4')[0])


        //表单验证逻辑
        let stepperFormEl = document.querySelector('#bs-stepper5')
        window.stepperForm = new Stepper(stepperFormEl, {
            animation: true
        })
        let btnNextList = [].slice.call(document.querySelectorAll('.btn-next-form'))
        let stepperPanList = [].slice.call(stepperFormEl.querySelectorAll('.bs-stepper-pane'))
        let inputMailForm = document.getElementById('email5')
        let inputPasswordForm = document.getElementById('password5')
        let form = stepperFormEl.querySelector('.bs-stepper-content form')
        btnNextList.forEach(function (btn) {
            btn.addEventListener('click', function () {
                window.stepperForm.next()
            })
        })

        stepperFormEl.addEventListener('show.bs-stepper', function (event) {
            form.classList.remove('was-validated')
            let currentStep = event.detail.indexStep

            if (currentStep > 0) {
                currentStep--
            }

            let stepperPan = stepperPanList[currentStep]

            if ((stepperPan.getAttribute('id') === 'bs-stepper5-1' && !inputMailForm.value.length) ||
                (stepperPan.getAttribute('id') === 'bs-stepper5-2' && !inputPasswordForm.value.length)) {
                event.preventDefault()
                form.classList.add('was-validated')
            }
        })


    })
</script>
</body>
</html>